<template>
  <view class="x-white-bg x-pa x-flexp-row x-flex-jc-between">
    <view
      v-if="backShow"
      class="x-flex-none x-flexp-ai x-pr"
      @click="$x.navigator.back()"
    >
      <el-button 
        type="text" 
        size="small"
        :icon="'el-icon-arrow-left'"
        v-bind="backObj"
      />
    </view>
    <view class="x-flex-1 x-flexp-ai">
      <slot name="title">
        {{ title }}
      </slot>
    </view>
    <view class="x-flex-none x-flexp-ai">
      <slot />
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        default: ''
      },
      backShow: {
        type: Boolean,
        default: false
      },
      backObj: {
        type: Object,
        default: ()=>({})
      },
    }
  }
</script>

<style lang="scss" scoped>

</style>
